<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <%@ include file="/common/dxp/include/common-base.jsp" %>
    <title>服务列表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>

<!-- Part 一、 以下是body主体内容的模块区域 -->
<body class="hold-transition ${sysColor} sidebar-mini">
<div class="wrapper">

    <!-- top start -->
    <%@include file="/common/dxp/top.jsp" %>
    <!-- top end -->
    <!-- left start -->
    <%@include file="/common/dxp/left.jsp" %>
    <!-- left end-->

    <div class="content-wrapper">
        <!-- Main start -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <!------- 列表 start -------->
                    <div class="box box-success">
                        <!--列表title  start -->
                        <div class="box-header with-border">
                            <h3 class="box-title"><i class="fa fa-table"></i> 服务列表
                            </h3>
                            <div class="box-tools pull-right">
                                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                        class="fa fa-minus"></i></button>
                            </div>
                        </div>
                        <div class="box-body">
                            <table id="dataList" class="table table-bordered table-hover">
                                <thead>
                                <tr id="dataList_thead_content" data-temp-code="true" data-temp-type="table"
                                    data-temp-show="dataList_template_content">
                                    <th>序号</th>
                                    <!-- temp="dataList_thead_content" start -->

                                    <th data-temp-obj="ssInsurProTag.tagCname">服务名称</th>
                                    <th data-temp-obj="ssInsurProTag.createTime">服务总数</th>
                                    <th data-temp-obj="ssInsurProTag.createTime">可用服务</th>
                                    <th data-temp-obj="ssInsurProTag.createTime">状态</th>
                                    <!-- temp="dataList_thead_content" end -->
                                </tr>
                                </thead>
                                <tbody id="dataList-body">

                                </tbody>
                            </table>
                        </div>

                        <div class="box-footer text-center">
                            <ul id="dataList-page" class="pagination">
                            </ul>
                        </div>
                    </div>
                    <!------- 列表 end -------->
                </div>
            </div>

            <!-- Part 二、以下是template模板定义的模块区域 -->
            <script type="text/template" id="dataList-template">
                <? for ( var i = 0; i < rows.length; i++) {?>
                <tr>
                    <td><?=(pageObj.currentPage-1)*10+(i+1)?></td>
                    <td><?=strUtil.doNull(rows[i].serverName,'')?></td>
                    <td>n/a(<?=strUtil.doNull(rows[i].serverNum,'')?>)</td>
                    <td>(<?=strUtil.doNull(rows[i].statusUp,'')?>)</td>
                    <td><? if(rows[i].statusUp>0){?> UP(<?=rows[i].statusUp?>)-
                        <? var ups = rows[i].up;?>
                        <? for (k=0;k<ups.length;k++){?>
                        <a target="_blank" style="color:#5fa134" href="<?=strUtil.doNull(ups[k].statusPageUrl,'')?>"><?=strUtil.doNull(ups[k].homePageUrl,'')?></a>&nbsp;&nbsp;
                        <?} ?>
                        <br>
                     <?} ?>
                        <? if(rows[i].statusDown>0){?> DOWN(<?=rows[i].statusDown?>)-
                        <? var downs = rows[i].down;?>
                        <? for (k=0;k<downs.length;k++){?>
                        <a target="_blank" href="<?=strUtil.doNull(downs[k].statusPageUrl,'')?>"><?=strUtil.doNull(downs[k].homePageUrl,'')?></a>&nbsp;&nbsp;
                        <?} ?>
                        <?} ?>
                    </td>
                </tr>
                <?}?>
            </script>

            <!-- Part 三、 以下是js模块区域 -->
            <script>
                var clickMenu = "eureka-list";
                dataListId = "dataList";//显示列表数据div的id
                $(function () {
                    //1、加载分页列表数据
                    getTableData();
                });

                $(function () {
                    //设置数据行选中效果
                    $('#' + dataListId + ' tbody').on('click', 'tr', function (e) {
                        if ($(this).hasClass('selected')) {
                        } else {
                            $('tr.selected').removeClass('selected');
                            $(this).addClass('selected');
                        }
                    });
                });

                //加载列表数据
                function getTableData() {
                    var index_load = layer.load(1, {shade: false});
                    $.ajax({
                        type: 'get',
                        url: '${ctx}/serverList',
                        dataType: 'json',
                        success: function (myData) {
                            console.log(myData);
                            if ("T" == myData.flag) {
                                var data = baidu.template(dataListId + "-template", eval(myData));
                                $("#" + dataListId + "-body").html(data);
                            }
                            layer.close(index_load);
                        }
                    });
                }
                //设置token
                function setToken() {
                    $.ajax({
                        type: 'get',
                        url: '${ctx}/sendPage/token?token=true',
                        dataType: 'text',
                        success: function (myData) {
                            console.log(myData);
                            $('.formToken').val(myData);
                        }
                    });
                }
            </script>
        </section>
        <!-- Main end -->
    </div>
    <!-- foot start -->
    <%@include file="/common/dxp/foot.jsp" %>
    <!-- foot start -->
</div>
<!-- /.content-wrapper -->
</body>
</html>













